<template>
  <div class="container">

    <h1 style="color: black;padding: 20px">我的班级通知</h1>

    <el-collapse v-model="activeNames" @change="handleChange" class="item_main">
      <div v-for="(item,index) in classAndNoticeList" class="class_notice_wrap">
        <span class="item_title">{{ item.className }}</span>
        <el-collapse-item :name="index" class="item_body" >
          <div v-for="notice in item.notices" class="notice_wrap" @click="detail(notice)">
            <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
            <div class="simple_notice_time">{{ dateFormat(notice.updateTime)}}</div>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
    <el-button slot="reference" type="primary"
               style="float: right;position: relative;right: 10px; width: 200px;margin-bottom: 20px"
               @click="$router.go(-1)">返回
    </el-button>
    <!-- 详情弹框 -->
    <el-dialog :title="dialogTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <div>{{ dialogContent }}</div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "ClassAndNoticeList",
  data() {
    return {
      classAndNoticeList: this.$route.query.classAndNoticeList,
      activeNames: ['1'],
      detailDialogVisible: false,
      dialogContent: '',
      dialogTitle:''
    }
  }, methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    //展示详细内容
    detail(notice){
      this.dialogContent = notice.noticeContent;
      this.dialogTitle = notice.noticeTitle;
      this.detailDialogVisible = true;
    },
    handleChange(val) {
      console.log(val);
    }
  }, created() {
    console.log(this.classAndNoticeList)
  }
}
</script>

<style scoped>


.container {
  width: 70%;
  margin: auto;
  background-color: white;
  border-radius: 20px;
}

.item_body{
  margin-top: 20px;
  border-radius: 20px;
}
.item_body:hover{
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.item_title {
  height: 90px;
  font-weight: bold;
  color: #000;
  font-size: 20px;
}

.item_main {
  margin: 20px;
  padding: 20px;
}

.notice_wrap{
  background-color: #efefef;
  border-radius: 20px;
  margin: 10px;
}

.notice_wrap:hover{
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.simple_notice_title{
  font-weight: bold;
  font-size: 20px;
  color: #f34545;
}
</style>
